<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
<script type="text/babel">
    // 列表渲染
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    let data = [
        {
            id:1,
            bookName:"天龙八部",
            author:"金庸"
        },{
            id:2,
            bookName: "大奉打更人",
            author:"卖报小朗君"
        }
    ];
    {
        // 1
        // root.render(JSON.stringify(data))
    }
    {
        // 2
        // const res = data.map(item=>(
        //     <div key={item.id}>
        //         <h3>{item.bookName}</h3>
        //     </div>
        // ))
        // root.render(res);
    }
    {
        // 3
        const res = data.map(item=>(
            <React.Fragment key={item.id}>
                <h3>{item.bookName}</h3>
                <p>作者：{item.author}</p>
                <hr/>
            </React.Fragment>
        ))
        root.render(res);
    }
    {
        // root.render((
        //     <div>
        //
        //         {
        //             data.map(item=>(
        //                 <React.Fragment key={item.id}>
        //                     <h3>{item.bookName}</h3>
        //                     <p>作者：{item.author}</p>
        //                     <hr/>
        //                 </React.Fragment>
        //             ))
        //         }
        //     </div>
        // ));
    }
</script>
</html>